<template>
  <div class="box">
    <Banner/>
    <div class="row">
      <div class="list-group-box">
        <div class="list-group">
          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="right panel">
        <div class="panel-body">
          <!-- 指定组件的呈现位置 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Banner from './components/Banner';
  export default {
    name: 'App',
    components: {Banner},
    mounted() {
      console.log("我是APP组件",this)
    },
    methods: {
      
    },
   
  }
</script>

<style lang="less" scoped>
  .box{
    margin:0 auto;
  }
  .page-header{
    padding:10px 0px;
    border-bottom: 1px solid #ccc;
  }
  .row{
    display: flex;
    justify-content: flex-start;
  }
  .list-group{
    border:1px solid #ccc;
    .list-group-item{
      display: block;
      color: black;
      background-color: #ddd;
      padding:10px;
      text-decoration:none;
    }
    .active{
      color: white;
      background-color: #1621b9;
    }
  } 
  
</style>
